iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
Mobile Development

iOS Developer Learning Flutter系列 第 2

iOS Developer Learning Flutter. Lesson1 依然哈囉

  • 分享至 

  • xImage
  •  

學習所有語言首先永遠是跟世界打招呼
目的在於確立開發環境的建立是否成功

1. 環境建立

step1

以往iOS或Android開發的第一步
都是先下載IDE
而開發Flutter必須是先下載SDK⚠️⚠️⚠️(請往這邊走)
如果要看歷史版本就去那邊
PS.新讀者可能不知道,只要看到⚠️⚠️⚠️就代表跟iOS開發有不太一樣的地方,做為提醒

本課程使用的SDK版本:stable 1.17.5

step2

選個你喜歡的地方解壓縮

step3

開啟terminal 輸入以下指令

export PATH=$PATH:{剛剛解壓縮的資料夾}/bin

//例如
export PATH=$PATH:/Users/MarkFly/Documents/code/Flutter/flutterSDK/bin

PS. 為什麼這邊一定要用export 用cd就不行呢?...
PS2. 小訣竅:在快顯功能表按住option會有拷貝路徑的選項

step4

執行flutter doctor(這名字取得真好XD)
然後醫生就會跟你說你哪邊不行(各位男士別想歪www)
例如以我的AS來說
就還需要裝Flutter跟Dart的plugin

step5

把缺的外掛補上(裝Flutter的時候就會問你要不要順便裝Dart了)
記~得~重~啟~IDE

step6

用人家的東西就同意一下人家的條款

flutter doctor --android-licenses

step7

回診!
沒有紅色叉叉應該就可以了(我們不用VSCode開發就不管他)

2. 開新專案

可以看到啟動頁已經有Flutter專案的選項囉

先選第一個
其他選項離現在的我們還很遙遠

專案名稱只能小寫(每次看到這種要求就覺得很不爽>"<)

最後一步
複習一下package name就是我們的bundle id☘️☘️☘️
然後我androidX是有勾啦
PS.新讀者可能不知道,只要看到☘️☘️☘️就代表跟iOS開發有類似的地方,做為提醒

專案建好後
可以看到右上角有選擇裝置的地方
選好後可以按綠色三角形去run
看到AS可以跑iPhone模擬器感覺很新奇XDDDD

跟iOS或Android都不一樣
新專案一建立就會有個現成的小Demo⚠️⚠️⚠️
程式的進入點在main.dart檔裡面的main function
至於裡面寫了什麼呢
我們之後再慢慢研究
今天先來體驗一下Hot Reload
套一句強國RN的話XDDDD
「別再傻等編譯了!」

順便介紹一個我覺得很有意思的語法:字串可以乘以整數代表重複幾次

            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),

改成

            Text("是在哈囉\n" * _counter),

然後輕輕地按下command+S
你會發現模擬器立馬有了變化

你按幾下它就哈囉幾次XDDD

3. 情境題

  • 為什麼一刷新馬上就好多個哈囉

那是因為Flutter hot reload只會重新渲染畫面
變數並不會重新初始化
如果你想要每次刷新都從零開始
可以在_MyHomePageState裡面加上這段程式碼

  @override
  void reassemble() {
    super.reassemble();
    _counter = 0;
  }
  • 如果我想要改SDK路徑該去哪裡設定

  • IDE用得好好的,有一天突然找不到模擬器怎麼辦

就找醫生吧(flutter doctor)
照著醫囑做就對了

//例如會有如下指示
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
  • 那如果找不到實機呢?

...重開一下就好了(翻桌!!!)


本集內容Android版請見:iOS Developer Learning Android. Lesson 02

下集預告:icon & launch


上一篇
iOS Developer Learning Flutter. Lesson0 開場白
下一篇
iOS Developer Learning Flutter. Lesson2 第一印象
系列文
iOS Developer Learning Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言